<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/meringerTemplate.xhtml">
	<ui:define name="custom">
				<style media="screen" type="text/css">
					.ui-cell-editor-input {
						width: 90px;
					}			
				</style>
		</ui:define>
	<ui:define name="content">

		<h:form id="form">
			<p:growl id="messages" showDetail="true"/>
			
		<p:dataTable var="carModel" value="#{tableCarModelBean.allCarModels}" id="carList"
				editable="true">

				<f:facet name="header">  
            		Car Model Administration  
        		</f:facet>

				<p:ajax event="rowEdit" listener="#{tableCarModelBean.onEdit}"
					update=":form:messages" />
				<p:ajax event="rowEditCancel" listener="#{tableCarModelBean.onCancel}"
					update=":form:messages" />

				<p:column id="carName" headerText="Name" style="width:20%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.name}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText  id="carNameInput" value="#{carModel.name}" style="width:100%" />
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Price" style="width:10%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.price}" id="priceid1">
								<f:convertNumber type="number"/>
							</h:outputText>
							
						</f:facet>
						<f:facet name="input">
							<p:inputText id="priceid" value="#{carModel.price}" style="width:50%" label="Price">
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
							 
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column headerText="Init topspeed" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.initTopSpeed}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.initTopSpeed}" style="width:100%" label="Init topspeed" >
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Init handling" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.initHandling}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.initHandling}" style="width:100%" label="Init handling">
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Init acc" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.initAcceleration}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.initAcceleration}" style="width:100%" label="Init acceleration" >
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Max topspeed" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.maxTopSpeed}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.maxTopSpeed}" style="width:100%" label="Max topspeed" >
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Max handling" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.maxHandling}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.maxHandling}" style="width:100%" label="Max handling" >
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>
				
				<p:column headerText="Max acc" style="width:8%">
					<p:cellEditor>
						<f:facet name="output">
							<h:outputText value="#{carModel.maxAcceleration}" />
						</f:facet>
						<f:facet name="input">
							<p:inputText value="#{carModel.maxAcceleration}" style="width:100%" label="Max acceleration" >
								<f:convertNumber integerOnly="true" type="number"/>
							</p:inputText>
						</f:facet>
					</p:cellEditor>
				</p:column>

				<p:column style="width:6%">
					<f:facet name="header">
					<h:commandButton id="addButton"  
             			actionListener="#{tableCarModelBean.add}" image="/img/plus-button.png" style="width:20px; height:20px;"/> 
					</f:facet>
					<p:rowEditor />
				</p:column>

			</p:dataTable>

		</h:form>
	</ui:define>
</ui:composition>

</html>
